<div style='color:#212529' class="myvideo">
    @if ($resource->video->ali_id === null)
        <div class="div_null">
            暂无内容-请耐心等待XiaoMing添加
        </div>
    @else
        <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.1/skins/default/aliplayer-min.css" />
        <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.13.1/aliplayer-min.js"></script>
        <div id="ali-player"></div>
        <div id="player-message" style="display:none;" class="alert alert-info mt-2"></div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 获取视频ID
                var videoId = '{{ $resource->video->ali_id }}';
                var playerMessage = document.getElementById('player-message');
                var playerContainer = document.getElementById('ali-player');
                
                function showMessage(message, type) {
                    playerMessage.className = 'alert alert-' + (type || 'info') + ' mt-2';
                    playerMessage.innerHTML = message;
                    playerMessage.style.display = 'block';
                }
                
                function hideMessage() {
                    playerMessage.style.display = 'none';
                }
                
                // 显示安装说明
                function showInstallInstructions() {
                    var instructions = `
                        <h5>阿里云SDK安装说明</h5>
                        <p>服务器需要安装阿里云SDK才能获取视频播放凭证。</p>
                        <ol>
                            <li>通过SSH登录到服务器</li>
                            <li>进入网站根目录</li>
                            <li>运行命令: <code>composer require alibabacloud/sdk</code></li>
                            <li>等待安装完成后刷新本页面</li>
                        </ol>
                    `;
                    
                    var modal = document.createElement('div');
                    modal.className = 'modal fade';
                    modal.id = 'sdkInstructionsModal';
                    modal.innerHTML = `
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">阿里云SDK安装说明</h5>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <div class="modal-body">
                                    ${instructions}
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    document.body.appendChild(modal);
                    $('#sdkInstructionsModal').modal('show');
                }
                
                // 显示加载信息
                showMessage('正在加载播放凭证，请稍候...');
                
                // 创建表单数据
                var formData = new FormData();
                formData.append('videoId', videoId);
                formData.append('_token', '{{ csrf_token() }}');
                
                // 发送AJAX请求获取播放凭证
                fetch('{{ route('course.getVideoPlayAuth') }}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('服务器响应错误：' + response.status);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('获取播放凭证响应:', data);
                    
                    if (data.code === 1) {
                        hideMessage();
                        
                        // 创建播放器的配置
                        var playerConfig = {
                            id: 'ali-player',
                            width: '100%',
                            height: '500px',
                            autoplay: false,
                            isLive: false,
                            rePlay: false,
                            playsinline: true,
                            preload: true,
                            controlBarVisibility: 'hover',
                            useH5Prism: true,
                            // 播放方式: 播放凭证
                            vid: data.data.VideoId,
                            playauth: data.data.PlayAuth,
                            // 加密视频设置
                            encryptType: 1
                        };
                        
                        // 创建播放器
                        try {
                            var player = new Aliplayer(playerConfig, function(player) {
                                console.log('播放器创建成功');
                            });
                            
                            // 监听播放器错误
                            player.on('error', function(e) {
                                console.error('播放器错误:', e);
                                var errorMsg = '播放器遇到错误';
                                if (e.paramData && e.paramData.error_msg) {
                                    errorMsg += '：' + e.paramData.error_msg;
                                }
                                showMessage(errorMsg + '<br>请检查阿里云配置或联系管理员' +
                                    '<br><a href="{{ route('test.vod.page') }}" target="_blank" class="btn btn-sm btn-info mt-2">测试阿里云VOD配置</a>', 'danger');
                            });
                        } catch (error) {
                            console.error('创建播放器失败:', error);
                            showMessage('创建播放器失败：' + error.message + 
                                '<br><a href="{{ route('test.vod.page') }}" target="_blank" class="btn btn-sm btn-info mt-2">测试阿里云VOD配置</a>', 'danger');
                        }
                    } else {
                        console.error('获取播放凭证失败:', data.msg);
                        
                        // 检查是否为SDK缺失错误
                        if (data.sdk_missing) {
                            var errorMsg = `
                                <div class="text-center">
                                    <p><strong>${data.msg}</strong></p>
                                    <p>服务器需要安装阿里云SDK才能播放视频</p>
                                    <button class="btn btn-primary mt-2" onclick="showInstallInstructions()">查看安装说明</button>
                                    <a href="{{ route('test.vod.page') }}" target="_blank" class="btn btn-info mt-2 ml-2">测试阿里云VOD配置</a>
                                </div>
                            `;
                            showMessage(errorMsg, 'warning');
                            // 定义安装说明函数
                            window.showInstallInstructions = showInstallInstructions;
                        } else {
                            // 显示详细错误
                            var detailsText = '';
                            if (data.details && Array.isArray(data.details)) {
                                detailsText = '<ul class="mt-2 mb-0">';
                                data.details.forEach(function(detail) {
                                    detailsText += '<li>' + detail + '</li>';
                                });
                                detailsText += '</ul>';
                            }
                            
                            showMessage(data.msg + detailsText, 'danger');
                        }
                    }
                })
                .catch(error => {
                    console.error('请求失败:', error);
                    showMessage(`
                        <p><strong>请求播放凭证失败：${error.message}</strong></p>
                        <p>可能的原因:</p>
                        <ul>
                            <li>服务器连接异常，请检查网络</li>
                            <li>服务器内部错误，请联系管理员</li>
                            <li>阿里云SDK未安装或配置错误</li>
                        </ul>
                        <a href="{{ route('test.vod.page') }}" target="_blank" class="btn btn-sm btn-info mt-2">测试阿里云VOD配置</a>
                    `, 'danger');
                });
            });
        </script>
    @endif
</div>